import React, { useEffect, useState } from 'react';
import { connect, useDispatch, useSelector } from 'umi';
import { Column } from '@ant-design/plots';
import { Card, Col, Collapse, Row, Select, Table, Tooltip } from 'antd';

const { Panel } = Collapse;

const CetFailAnalyse = () => {
  //柱状图的数据
  const [data, setData] = useState([
    {
      name: '四级未通过人数占比',
      classLabel: '电气2201',
      failureRate: 20,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2202',
      failureRate: 35,
      totalClassSize: 40,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2203',
      failureRate: 54.28,
      totalClassSize: 35,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2204',
      failureRate: 37.77,
      totalClassSize: 45,
    },

    {
      name: '六级未通过人数占比',
      classLabel: '电气2201',
      failureRate: 60,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2202',
      failureRate: 32.5,
      totalClassSize: 40,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2203',
      failureRate: 77.14,
      totalClassSize: 35,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2204',
      failureRate: 80,
      totalClassSize: 45,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能221',
      failureRate: 12.3,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能222',
      failureRate: 27.6,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能223',
      failureRate: 15.8,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能224',
      failureRate: 25.6,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能221',
      failureRate: 51.3,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能222',
      failureRate: 31.6,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能223',
      failureRate: 34.8,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能224',
      failureRate: 35,
      totalClassSize: 30,
    },
  ]);
  const [dataCopy, setDataCopy] = useState([
    {
      name: '四级未通过人数占比',
      classLabel: '电气2201',
      failureRate: 20,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2202',
      failureRate: 35,
      totalClassSize: 40,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2203',
      failureRate: 54.28,
      totalClassSize: 35,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '电气2204',
      failureRate: 37.77,
      totalClassSize: 45,
    },

    {
      name: '六级未通过人数占比',
      classLabel: '电气2201',
      failureRate: 60,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2202',
      failureRate: 32.5,
      totalClassSize: 40,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2203',
      failureRate: 77.14,
      totalClassSize: 35,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '电气2204',
      failureRate: 80,
      totalClassSize: 45,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能221',
      failureRate: 12.3,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能222',
      failureRate: 27.6,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能223',
      failureRate: 15.8,
      totalClassSize: 30,
    },
    {
      name: '四级未通过人数占比',
      classLabel: '新能224',
      failureRate: 12,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能221',
      failureRate: 51.3,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能222',
      failureRate: 31.6,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能223',
      failureRate: 34.8,
      totalClassSize: 30,
    },
    {
      name: '六级未通过人数占比',
      classLabel: '新能224',
      failureRate: 35,
      totalClassSize: 30,
    },
  ]);
  //表格的数据
  const [dataSource, setdataSource] = useState([
    {
      classLabel: '电气2201',
      failureRate4: 20,
      failureRate6: 60,
      totalClassSize: 30,
    },
    {
      classLabel: '电气2202',
      failureRate4: 35,
      failureRate6: 32.5,
      totalClassSize: 40,
    },
    {
      classLabel: '电气2203',
      failureRate4: 54.28,
      failureRate6: 77.14,
      totalClassSize: 35,
    },
    {
      classLabel: '电气2204',
      failureRate4: 37.77,
      failureRate6: 80,
      totalClassSize: 45,
    },
    {
      classLabel: '新能221',
      failureRate4: 12.3,
      failureRate6: 51.3,
      totalClassSize: 30,
    },
    {
      classLabel: '新能222',
      failureRate4: 27.6,
      failureRate6: 31.6,
      totalClassSize: 30,
    },
    {
      classLabel: '新能223',
      failureRate4: 15.8,
      failureRate6: 34.8,
      totalClassSize: 30,
    },
    {
      classLabel: '新能224',
      failureRate4: 12,
      failureRate6: 35,
      totalClassSize: 30,
    },
  ]);
  const [dataSourceCopy, setdataSourceCopy] = useState([
    {
      classLabel: '电气2201',
      failureRate4: 20,
      failureRate6: 60,
      totalClassSize: 30,
    },
    {
      classLabel: '电气2202',
      failureRate4: 35,
      failureRate6: 32.5,
      totalClassSize: 40,
    },
    {
      classLabel: '电气2203',
      failureRate4: 54.28,
      failureRate6: 77.14,
      totalClassSize: 35,
    },
    {
      classLabel: '电气2204',
      failureRate4: 37.77,
      failureRate6: 80,
      totalClassSize: 45,
    },
    {
      classLabel: '新能221',
      failureRate4: 12.3,
      failureRate6: 51.3,
      totalClassSize: 30,
    },
    {
      classLabel: '新能222',
      failureRate4: 27.6,
      failureRate6: 31.6,
      totalClassSize: 30,
    },
    {
      classLabel: '新能223',
      failureRate4: 15.8,
      failureRate6: 34.8,
      totalClassSize: 30,
    },
    {
      classLabel: '新能224',
      failureRate4: 12,
      failureRate6: 35,
      totalClassSize: 30,
    },
  ]);
  const columns = [
    {
      title: '班级名称',
      dataIndex: 'classLabel',
    },
    {
      title: '四级未通过人数占比',
      dataIndex: 'failureRate4',
      render: (text) => `${text}%`,
    },
    {
      title: '六级未通过人数占比',
      dataIndex: 'failureRate6',
      render: (text) => `${text}%`,
    },
  ];

  //柱状图的样式
  const config = {
    data,
    isGroup: true,
    xField: 'classLabel',
    yField: 'failureRate',
    seriesField: 'name',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'bottom-left',
      // 'top', 'middle', 'bottom'
      formatter: (item) => {
        let newValue = Math.round(
          (item.failureRate * item.totalClassSize) / 100,
        ); // 进一步计算
        return `${newValue}人`; // 显示格式化后的数据
      },
      style: {
        fill: '#000',
        fontSize: 12,
        fontWeight: 'bold',
      },
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
  };
  //const dispatch = useDispatch();
  //const cetfail = useSelector((state) => state.detailScoreModel.cetfail);
  const [selectedMajor, setSelectedMajor] = useState('电气');
  const handleMajorChange = (value) => {
    setSelectedMajor(value);
    let list: { name: string; classLabel: string; failureRate: number }[] = [];
    if (value === '新能') {
      list = dataCopy.filter((item) => item.classLabel.includes('新能')); //Array.filter()保留参数为true的那一项
    } else if (value === '电气') {
      list = dataCopy.filter((item) => !item.classLabel.includes('新能'));
    }
    setData(list);
  };

  const [selectedMajorTable, setSelectedMajorTable] = useState('电气');
  const handleMajorChangeTable = (value1) => {
    setSelectedMajorTable(value1);
    let list1: {
      classLabel: string;
      failureRate4: number;
      failureRate6: number;
    }[] = [];
    if (value1 === '新能') {
      list1 = dataSourceCopy.filter((item) => item.classLabel.includes('新能')); //Array.filter()保留参数为true的那一项
    } else if (value1 === '电气') {
      list1 = dataSourceCopy.filter(
        (item) => !item.classLabel.includes('新能'),
      );
    }
    setdataSource(list1);
  };

  useEffect(() => {
    // dispatch({
    //   type: 'detailScoreModel/fetchCetfail',
    // });
    handleMajorChange(selectedMajor);
    handleMajorChangeTable(selectedMajorTable);
  }, []);

  const content = <div>关闭卡</div>;

  return (
    <div>
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>
            班级CET通过率对比
          </span>
        }
      >
        <Row gutter={8}>
          <Col span={12}>
            <Collapse defaultActiveKey={['1']}>
              <Panel
                header={
                  <Tooltip title="展示横向班级间对比，每个班四级、六级不通过人数与班级人数占比，同时注明人数">
                    <div>柱状图</div>
                  </Tooltip>
                }
                key="1"
              >
                <Card
                  title={'条形图'}
                  extra={
                    <Select
                      placeholder={'选择专业'}
                      style={{ width: 200 }}
                      onChange={handleMajorChange}
                      defaultValue={'电气'}
                    >
                      <Select.Option value="新能">
                        新能源科学与工程
                      </Select.Option>
                      <Select.Option value="电气">
                        电气工程及其自动化
                      </Select.Option>
                    </Select>
                  }
                >
                  <Column {...config} />
                </Card>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse defaultActiveKey={['1']}>
              <Panel
                header={
                  <Tooltip title="纵向对比往届四级、六级不通过人数与班级人数占比，同时注明不通过人数">
                    <div>表格</div>
                  </Tooltip>
                }
                key="1"
              >
                <Card
                  title={'表格'}
                  extra={
                    <Select
                      placeholder={'选择专业'}
                      style={{ width: 200 }}
                      onChange={handleMajorChangeTable}
                      defaultValue={'电气'}
                    >
                      <Select.Option value="新能">
                        新能源科学与工程
                      </Select.Option>
                      <Select.Option value="电气">
                        电气工程及其自动化
                      </Select.Option>
                    </Select>
                  }
                >
                  <Table columns={columns} dataSource={dataSource} />
                </Card>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default connect(({ detailScoreModel }) => ({
  cetfail: detailScoreModel.cetfail,
}))(CetFailAnalyse);
